<template>
    <div v-loading="loading" class="ordering">
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/dish' }">菜品管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ id ? '修改菜品' : '添加菜品' }}</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 内容区域 -->
        <div class="content-view-ten">
            <el-form label-position="top">
                <!-- 菜品类目 -->
                <el-form-item label="菜品类目">
                    <el-select v-model="formInput.categoryId" placeholder="请选择菜品类目">
                        <el-option v-for="cate in cateList" :key="cate.id" :label="cate.label"
                                   :value="cate.id"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 菜品名称 -->
                <el-form-item label="菜品名称">
                    <el-input v-model="formInput.name" clearable placeholder="请输入菜品名称" type="text"/>
                </el-form-item>
                <!-- 菜品价格 -->
                <el-form-item label="菜品价格">
                    <div class="upload-option">
                        <el-input v-model="formInput.price" class="price-input" clearable min="0"
                                  placeholder="请输入菜品价格" type="number"/>
                    </div>
                </el-form-item>
                <!-- 菜品状态 -->
                <el-form-item label="菜品状态">
                    <el-radio-group v-model="formInput.status">
                        <el-radio-button :label="1">上架</el-radio-button>
                        <el-radio-button :label="0">下架</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <!-- 菜品图片 -->
                <el-form-item label="菜品图片">
                    <Upload v-model="formInput.image"></Upload>
                </el-form-item>
            </el-form>
            <!-- 提交按钮 -->
            <div class="image-button">
                <el-button size="medium" type="success" @click="submitForm">{{
                    id ? '修改菜品' : '上架菜品'
                    }}
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
import Upload from '@/components/upload'
import {addDishDataApi, getDishCateApi, getDishDataInfoApi, setDishDataApi} from '@/api/dish'

export default {
    name: 'EditDish',
    components: {Upload},
    data() {
        return {
            id: '',
            loading: true,
            formInput: {
                name: '',
                price: '',
                categoryId: '',
                image: '',
                status: 1,
            },
            cateList: [],
        }
    },
    mounted() {
        this.id = this.$route.query.id
        if (this.id) this.loadDish()
        this.init()
    },
    methods: {
        async init() {
            this.loading = true
            try {
                const {data} = await getDishCateApi({pageNum: 1, pageSize: 100})
                this.cateList = data.list.map(item => ({label: item.label, id: item.id}))
            } catch (error) {
                console.error("Failed to fetch categories:", error)
            } finally {
                this.loading = false
            }
        },
        async loadDish() {
            try {
                const {data} = await getDishDataInfoApi(this.id)
                this.formInput = data
                console.log(data)
            } catch (error) {
                console.error("Failed to fetch dish data:", error)
            }
        },
        async submitForm() {
            try {
                const cate = this.cateList.find(cate => cate.id === this.formInput.categoryId)
                const data = {...this.formInput, category: cate.label}
                if (this.id) {
                    await setDishDataApi(data)
                } else {
                    await addDishDataApi(data)
                }
                this.$message.success('操作成功')
                await this.$router.push('/dish')
            } catch (error) {
                console.error("Failed to submit form:", error)
                this.$message.error('操作失败')
            }
        }
    }
}
</script>


<style lang="scss" scoped>
@import url('@/styles/overall.css');

.content-view-ten {
  max-width: 800px;
  margin: 0 auto;
}

.upload-option {
  display: flex;
  align-items: center;
  justify-content: left;

  div {
    width: 25% !important;
    margin-right: 5px;
  }
}

.upload-option .el-button--success {
  width: 150px;
}
</style>
